/* 自定义样式，可覆盖默认的样式，默认样式变量如下 */
/* [https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css] */

$length--48: 48px;
$length--24: 24px;
$length--16: 16px;
$myWidth: calc(var(--vp-sidebar-width) + $length--48);

.Layout {
  .vp-doc h2 {
    margin-top: $length--24;
  }
  
  // h3紧跟的h4
  .vp-doc h3 + h4 {
    margin-top: $length--16;
  }
  
  // tip等框标题
  .custom-block .custom-block-title {
    font-size: $length--16;
  }

  // 图片增加立体感
  p > img {
    box-shadow: 0 0 5px var(--vp-c-gray);
    border-radius: 10px;
  }
  
  // 优化搜索框的样式(针对flex search)
  // 屏幕宽度大于768px
  // @media (min-width: 768px) {
  //   .VPNav {
  //     .VPNavBarSearch {
  //       height: 40px;
  //       padding: 0 10px 0 12px;
  //       border-radius: 8px;
  //       background-color: var(--vp-c-bg-alt);
  //     }
  //     .DocSearch-Button-Placeholder {
  //       margin-top: 2px;
  //       color: var(--vp-c-text-1);
  //     }
  //     .DocSearch-Button-Keys {
  //       margin-top:3px;
  //       border: 1px solid var(--vp-c-divider);
  //       border-radius: 4px;
  //       color: var(--vp-c-text-1);;
  //       display: block
  //     }
  //   }
  // }
  
  // // 屏幕宽度小于768px
  // @media (max-width: 768px) {
  //   .VPNav {
  //     .DocSearch-Button {
  //       margin-right: -$length--16;
  //     }
  //     .DocSearch-Button-Keys {
  //       display: none;
  //     }
  //   }
  // }
  
  // 屏幕宽度大于1440px页面整体布局修改
  @media (min-width: 1440px) {
    // 顶部导航栏
    .VPNavBar.has-sidebar div.content {
      padding-left: $myWidth;
      padding-right: var(--vp-nav-height);
    }
    .VPNavBar.has-sidebar .curtain {
      width: calc(100% - $myWidth);
    }
    // 侧边栏固定宽度为272px
    .VPNavBar.has-sidebar div.title {
      padding-left: $length--48;
      padding-right: $length--16;
      width: $myWidth;
    }
    .VPSidebar {
      padding-left: $length--48;
      width: $myWidth;
    }
    // 正文内容内边距
    .VPContent.has-sidebar {
      padding-left: $myWidth;
      padding-right: var(--vp-nav-height);
    }
  }

  // 链接卡片样式
  .essay-container {
    --iconWidth: 48px;
    --iconRight: 12px;
    display: block;
    border: 1px solid var(--vp-c-bg-soft-mute);
    background-color: var(--vp-c-bg-soft);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s;
    margin-bottom: 10px;
  
    &:hover {
      background-color: var(--vp-c-bg);
      border: 1px solid var(--vp-c-green);
    }
  
    .essay-content {
      display: flex;
      align-items: center;
      padding: 10px;
    }
  
    .icon {
      width: var(--iconWidth);
      height: var(--iconWidth);
      margin-right: var(--iconRight);
      border-radius: 4px;
    }
  
    .essay-text {
      width: calc(100% - var(--iconWidth) - var(--iconRight));
    }
  
    .essay-title,
    .essay-link {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  
    .essay-title {
      color: var(--vp-c-text-1);
      font-weight: 700;
    }
  
    .essay-link {
      font-size: 12px;
      color: var(--vp-c-text-2);
    }
  }

}

// 暗黑模式
.dark {
  p > img {
    opacity: 0.9;
  }

  .essay-container {
    &:hover {
      background-color: var(--vp-c-bg-soft-mute);
      border: 1px solid var(--vp-c-green-dark);
    }
  }
}
